<script setup lang="ts">
import lodash from 'lodash'
import { showDialog } from 'vant'
import { Common } from '~/common'
import type { OrderModel } from '~/model/OrderModel'
import { MaterialModel, OrderItemModel } from '~/model'
import { OrderApi } from '~/api/OrderApi'

const route = useRoute()

const order = ref(null as OrderModel | null)
const showPrice = ref(false)

const printDpi = 72
console.log(`print at dpi: ${printDpi}`)

const printWidth = 241 / 25.41 * printDpi
const printHeight = 140 / 25.41 * printDpi

const paperStyle = {
  width: `${printWidth}px`,
  height: `${printHeight}px`,
}

// const printLen = 10
const printLen = 8

const list = computed(() => {
  if (!order.value) {
    return []
  }
  const _list = lodash.cloneDeep(order.value.items)
  if (order.value.needDelivery && order.value.fare) {
    // 运费 material
    const material = new MaterialModel()
    material.name = '运费'
    material.specification = ''
    material.unit = ''

    // 运费oim
    const oim = new OrderItemModel()
    oim.material = material
    oim.quantity = '' as any
    oim.unitPrice = order.value.fare
    oim.amount = order.value.fare
    _list?.push(oim)
  }

  const emptyLines = printLen - _list.length
  for (let i = 0; i < emptyLines; i++)
    _list?.push({} as any)

  // console.log(_list)

  return _list
})

const totalAmount = computed(() => {
  let _sum = 0
  for (const item of list.value!) {
    if (item.amount)
      _sum += item.amount
  }

  return _sum
})

onMounted(async () => {
  const orderId = Number.parseInt(route.query.id as string)

  const _order = await OrderApi.getForPrint(orderId)
  if (_order === undefined) {
    showDialog({
      message: `没有id=${orderId}的订单`,
    })
    return
  }
  order.value = _order

  const _showPrice = Number.parseInt(route.query.showPrice as string)
  showPrice.value = !!_showPrice

  if (process.env.NODE_ENV !== 'development') { // 开发环境
    window.setTimeout(() => {
      window.print()
    })
  }
})
</script>

<template>
  <div v-if="order && order.consumer" class="root">
    <div id="ticket" class="ticket-paper" :style="paperStyle">
      <div flex>
        <div w="33%" />
        <div w="33%">
          <div class="ticket-title">
            辽西塑业{{ showPrice ? '销售单' : '出库单' }}
          </div>
        </div>
        <div w="33%">
          <div class="serial">
            No.{{ order.serial() }}
          </div>
        </div>
      </div>

      <div class="header-row">
        <div class="header-col header-col-0">
          <span class="header-item">单位：</span>
          <span class="fit-underline">{{ order.consumer.name }}</span>
        </div>
        <div class="header-col">
          <span class="header-item">批次：</span>
          <span class="fit-underline">{{ order.batch }}</span>
        </div>
        <div class="header-col header-col-2">
          <span class="header-item header-item-2">时间：</span>
          <span class="fit-underline">{{ Common.timeFormat(order.date.valueOf()) }}</span>
        </div>
      </div>
      <table class="tkt-table">
        <thead>
          <tr>
            <th class="col-1">
              序号
            </th>
            <th>产品名称</th>
            <th>规格</th>
            <th>单位</th>
            <th>数量</th>
            <th v-if="showPrice">
              单价(元)
            </th>
            <th v-if="showPrice">
              金额(元)
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in list" :key="index">
            <td class="col-1">
              {{ index + 1 }}
            </td>
            <td>{{ item.material?.name }}</td>
            <td>{{ item.material?.specification }}</td>
            <td>{{ item.material?.unit }}</td>
            <td>{{ item.quantity }}</td>
            <td v-if="showPrice">
              {{ item.unitPrice }}
            </td>
            <td v-if="showPrice">
              {{ item.amount }}
            </td>
          </tr>
          <tr v-if="showPrice" lh="24px" text-size="14px">
            <td colspan="5">
              合计
            </td>
            <td colspan="2">
              {{ totalAmount }}
            </td>
          </tr>
        </tbody>
      </table>
      <div class="comment">
        <div class="comment-col-1">
          备注
        </div>
        <div class="comment-col-2">
          {{ order.notes }}
        </div>
      </div>
      <div class="comment">
        <div class="comment-col-1">
          {{ order.needDelivery ? '配送信息' : '提货方式' }}
        </div>
        <div class="comment-col-2">
          {{ order.needDelivery ? order.receiver : '到厂自提' }}
        </div>
      </div>
      <div class="comment ship">
        <div class="ship-col-1">
          提货登记
        </div>
        <div class="ship-col-2">
          <div h-full w-full flex>
            <div w="34%" style="border-right: 1px solid #000;">
              <div class="ship-item">
                姓名:
              </div>
            </div>
            <div w="33%" style="border-right: 1px solid #000;">
              <div class="ship-item">
                电话:
              </div>
            </div>
            <div w="33%">
              <div class="ship-item">
                车牌号:
              </div>
            </div>
          </div>
        </div>
      </div>
      <div text-size="10px">
        <span>请阅读：</span><span font-bold>辽西塑业《关于商品退换政策的说明》</span><br>
        <span>1. 产品一经售出，非因质量问题和配送错误，恕不接受退换货。请在购买前确认需求，谨慎下单。</span><br>
        <span>2. 收到产品后，客户须及时检查。如遇质量问题和数量错误，请在收货后24小时内联系我们。超时后概不处理。</span><br>
        <span>3. 如果对以上内容有异议的，请在购买前协商。如未提前协商，则买卖双方须默认履行以上约定。</span><br>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.root {
  overflow: auto;
  min-height: 100vh;
  background-color: lightskyblue;
  color: #000;
  font-size: 12px;
  font-weight: 100;
}

.ticket-paper {
  /* margin: 2rem auto; */
  // padding: 1em;
  background-color: white;
  /* box-shadow: 8px 8px 5px #888; */
  overflow: hidden;
}

#ticket {
  margin: 1em;
  margin-top: 2.5em;
}

.ticket-title {
  font-size: 22px;
  text-align: center;
}

.line-print {
  display: flex;
  padding: 16px;
}

.header-row {
  display: flex;
  // border: 2px solid #000;
  border-bottom: 0.5rem;
}

.header-col {
  padding: 0 1em;
  display: flex;
  flex-grow: 1;
  flex-shrink: 0;
  font-size: 14px;
}

.header-col-0 {
  padding-left: 0;
}

.header-col-2 {
  padding-right: 0;
  text-align: right;
  flex-grow: 0;
}

.fit-underline {
  display: block;
  // flex-grow: 1;
  // padding: 0 1em;
  // border-bottom: 1px solid black;
  // text-align: center;
}

.tkt-table {
  width: 100%;
  border: 2px solid #000;
  border-collapse: collapse;

  th,
  td {
    border: 1px solid #000;

    text-align: center;
  }

  .col-1 {
    width: 80px;
  }
}

.comment {
  border: 2px solid #000;
  border-top: none;
  display: flex;

  .comment-col-1 {
    border-right: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 82px;
  }

  .comment-col-2 {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    flex: 1;
    white-space: pre-wrap;
  }
}

.ship {
  height: 45px;

  .ship-col-1 {
    border-right: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 82px;
  }

  .ship-col-2 {
    display: flex;
    align-items: center;
    flex: 1;
    white-space: pre-wrap;

    .ship-item {
      padding: 0 4px;
      height: 100%;
      display: flex;
      align-items: center;
    }
  }
}

.serial {
  // width: 100%;
  height: 100%;
  // margin-right: 16px;
  display: flex;
  align-items: center;
  justify-content: right;
}

@page {
  size: 216mm 140mm;
  // page-orientation: rotate-left;
  margin-top: 0;
  margin-left: 0;
}
</style>

<route lang="yaml">
meta:
  layout: nolayout
</route>
